<template>
	<view class="page">
		<view class="head">
			<!-- #ifdef APP-PLUS -->
			<view class="title">购物车</view>
			<!-- #endif -->
			<view class="edit" @click="isEdit = !isEdit">
				<text>{{isEdit?'完成':'编辑'}}</text>
			</view>
		</view>
		<!-- 购物车列表 -->
		<mescroll-body ref="mescrollRef" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption"
			:top="0">
			<view class="cart-list">
				<view class="list" v-for="(item,index) in GoodCart" :key="index">
				          <view class="list">
				            <view class="check">
				              <text @click="checked(item.id,index)"
				                :class="GoodCart[index].choose?'iconfont icon-checked':'iconfont icon-check'"></text>
				              <!--:class="!GoodCart[index].choose?'iconfont icon-check':'iconfont icon-checked'"-->
				            </view>
				            <view class="goods">
				              <view class="thumb">
				                <image :src="require('../../img/' + item.pic)" mode=""></image>
				              </view>
				              <view class="item">
				                <view class="title">
				                  <text class="two-omit">{{item.name}}</text>
				                </view>
				                <view class="attribute">
				                  <view class="attr">
				                    <text>{{item.attr}}</text>
				                    <text class="more"></text>
				                  </view>
				                </view>
				                <view class="price-num">
				                  <view class="price">
				                    <text class="min">￥</text>
				                    <text class="max">{{item.price}}</text>
				                  </view>
				                  <view class="num">
				                    <view class="add">
				                      <text class="iconfont icon-jian" @click="ondeduct(index)"></text>
				                    </view>
				                    <view class="number">
				                      <text>{{item.goodnum}}</text>
				                    </view>
				                    <view class="add">
				                      <text class="iconfont icon-jia" @click="onadd(index)"></text>
				                    </view>
				                  </view>
				                </view>
				              </view>
				            </view>
				          </view>
				        </view>
			</view>
			<!-- 购物车失效商品列表 -->
			<view class="lose-efficacy-list">
				<view class="lose-efficacy-title">
					<view class="title">
						<text>失效商品1件</text>
					</view>
					<view class="empty">
						<text>清空失效商品</text>
					</view>
				</view>
				<view class="list" v-for="(item,index) in 2" :key="index">
					<view class="tag">
						<text>失效</text>
					</view>
					<view class="goods" @click="onSkip('goods')">
						<view class="pictrue">
							<image :src="'/static/img/goods_thumb_0'+ (index+1) +'.png'" mode=""></image>
						</view>
						<view class="item">
							<view class="title">
								<text class="two-omit">薇妮(Viney)时尚包包女包牛皮单肩包女休闲百搭斜挎包韩版小方包潮(水电费枪色)</text>
							</view>
							<view class="explain">
								<text>商品已不能购买，请联系客服进行沟通</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 为你推荐 -->
			<view class="recommend-info">
				<view class="recommend-title">
					<view class="title">
						<image src="/static/wntj_title.png" mode=""></image>
					</view>
				</view>
				<view class="goods-list">
					<view class="list" v-for="(item,index) in goodsList" @click="onSkip('goods')" :key="index">
						<view class="pictrue">
							<image :src="item.img" mode="heightFix"></image>
						</view>
						<view class="title-tag">
							<view class="tag">
								<text v-if="item.is_goods === 1">特价</text>
								{{item.name}}
							</view>
						</view>
						<view class="price-info">
							<view class="user-price">
								<text class="min">￥</text>
								<text class="max">{{item.price}}</text>
							</view>
							<view class="vip-price">
								<image src="/static/vip_ico.png"></image>
								<text>￥{{item.vip_price}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 结算 -->
			<view class="close-account">
				<view class="check-total">
					<view class="check">
						<text @click="checkAll()" :class="CAll?'iconfont icon-checked':'iconfont icon-check'"></text>
						<!-- 				<text @click="checked(item.id,index)" :class="GoodCart[index].choose?'iconfont icon-checked':'iconfont icon-check'"></text> -->
						<text class="all">全选</text>
					</view>
					<view class="total">
						<text>合计：</text>
						<text class="price" >{{allprice}}</text>
					</view>
				</view>
				<view class="account">
					<view class="btn-calculate" v-if="!isEdit">
						<text @click="Settlementa()">去结算({{idList.length}})</text>
					</view>
					<view class="btn-del" v-else>
						<text class="attention">移入关注</text>
						<text class="del" @click="dele()">删除</text>
					</view>
				</view>
			</view>
		</mescroll-body>
		<!-- tabbar -->
		<TabBar :tabBarShow="3"></TabBar>
	</view>
</template>

<script>
	import axios from "axios"
	import TabBar from '../../components/TabBar/TabBar.vue';
	// 引入mescroll-mixins.js
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			TabBar,
		},
		data() {
			return {
				GoodCart: [],
				idList: [],
				// alllprice: 5,

				CAll: false,
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					use: false,
					toTop: {
						src: '',
					}
				},
				isEdit: false,
				allprice:'0',
			};
		},
       
		onShow(){
			this.allprice=0;
			this.idList.length=0;
			// var aa=this.$queue.getData("GoodType")
			var bb = this.$queue.getData("id")
			axios.request("http://localhost:8089/Tro/selectCart/"+bb).then((res) => {
				this.GoodCart=res.data
				console.log(this.GoodCart)
			})
		},
		onReady() {
			uni.hideTabBar()
		},
		methods: {
			onadd(index) {
				this.GoodCart[index].goodnum+= 1
			},
			ondeduct(index) {
				this.GoodCart[index].goodnum-= 1
				
				if (this.GoodCart[index].goodnum<= 1) {
					this.GoodCart[index].goodnum= 1
				}
				
			},
		
			onload(){
				var bb = this.$queue.getData("id")
				axios.request("http://localhost:8089/Tro/selectCart/" + bb).then((res) => {
					this.GoodCart = res.data
					console.log(this.GoodCart)
				})
			},
			dele() {
					var that=this;
				uni.showModal({
					content: "确认将这" + that.idList.length + "个宝贝删除?",
					cancelText: "我再想想",
					cancelColor: "#999999",
					confirmText: "删除",
					confirmColor: "#fa436a",
					success(res) {
						if (res.confirm) {		
							// alert(1)
							console.log(that.idList)
							uni.request({
								url: "http://localhost:8089/Tro/Delete/",
								header: {
									'content-type': 'application/json'
								},
								data: {
									goodsId: that.idList
								},
								method: 'post',
								success(res) {
									that.idList.length=0;
									that.onload()
									}
							})
						} else if (res.cancel) {
							console.log("我再想想")
						}
					}
				})			
	},
	checkAll() {
			if (!this.CAll) {
				this.CAll = true;
				for (var i = 0; i < this.GoodCart.length; i++) {
					if (this.GoodCart[i].choose == false) {
						this.GoodCart[i].choose = true
						this.idList.push(this.GoodCart[i].id)
						this.allprice=Number(this.allprice)+Number(this.GoodCart[i].goodnum)*Number(this.GoodCart[i].price)
					}
				}
				console.log(this.idList)
			} else {
				this.CAll = false;
				for (var i = 0; i < this.GoodCart.length; i++) {
					if(this.GoodCart[i].choose == true){
						
					
					this.GoodCart[i].choose = false
					this.idList.splice(this.idList.indexOf(this.GoodCart[i].id), 1)
					this.allprice=Number(this.allprice)-Number(this.GoodCart[i].goodnum)*Number(this.GoodCart[i].price)
					}
				}
			}
		},
		checked(id, index) {
			// alert(this.GoodCart[index].choose)
			if (!this.GoodCart[index].choose) {
				this.idList.push(id);
				 // this.allprice();
				console.log(this.idList)
				this.GoodCart[index].choose = true;
				this.allprice=Number(this.allprice)+Number(this.GoodCart[index].goodnum)*Number(this.GoodCart[index].price);
				// alert(this.allprice)
			} else {
				this.idList.splice(this.idList.indexOf(id), 1)
				console.log(this.idList)
				 // this.allprice();
				this.GoodCart[index].choose = false;
				this.allprice=Number(this.allprice)-Number(this.GoodCart[index].goodnum)*Number(this.GoodCart[index].price);
				 // setTimeout()
			}
		},

		/*下拉刷新的回调, 有三种处理方式:*/
		downCallback() {
			this.mescroll.endSuccess();
		},
		/*上拉加载的回调*/
		upCallback(page) {
			setTimeout(() => {
				this.mescroll.endByPage(10, 20);
			}, 2000)
		},

		/**
		 * 跳转点击
		 * @param {String} type 跳转类型
		 */
		onSkip(type) {
			switch (type) {
				case 'classify':
					uni.navigateTo({
						url: '/pages/SearchGoodsList/SearchGoodsList',
					})
					break;
				case 'goods':
					uni.navigateTo({
						url: '/pages/GoodsDetails/GoodsDetails',
						animationType: 'zoom-fade-out',
						animationDuration: 200
					})
					break;
			}
		},
		Settlementa(){
			this.$queue.setData("gooda",this.idList)
			if(this.idList.length>0){
				uni.navigateTo({
					url: '/pages/ConfirmOrder/ConfirmOrder',	 
					})
			}
			
		}
	},
	
	}
</script>

<style scoped lang="scss">
	@import 'cart.scss';
</style>
